<template>
    <div class="tmpl">
        <nav-bar title='商品详情' />
        <swiper :imgs='imgs' />
        <p class="goods-title">商品标题</p>
        <div class="goods-box">
            <p>市场价：<span>￥999</span></p>
            <p>销售价：<i>￥5</i></p>
        </div>
        <div class="num">
            <p @click='subtract'>-</p>
            <p>{{addCarShop}}</p>
            <p @click='add'>+</p>
        </div>
        <div class="goods-button">
            <mt-button type="primary">立即购买</mt-button>
            <mt-button type="danger" @click='addCar'>加入购物车</mt-button>
            <transition name='ball' @after-enter="afterEnter">
                <p v-if='ball'></p>
            </transition>
        </div>
        <div class="goods-say">
            <mt-button type="primary" @click='goImageText()' plain>图文介绍</mt-button>
            <mt-button type="danger" @click='goComments' plain>商品评论</mt-button>
        </div>
    </div>
</template>
<script>
import Bus from '@/EventBus'
    export default {
        data () {
            return {
                id: '',
                imgs: [],
                ball: false,
                addCarShop: 1
            }
        },
        created () {
            this.id = this.$route.params.id;
            this.getGoodsImgDetails();
            this.getGoodsDetails();
        },
        methods: {
            // 去评论
            goComments() {
                this.$router.push({
                    name: 'goods.comments',
                    query: {
                        id: this.id
                    }
                })
            },
            // 图文介绍
            goImageText () {
                this.$router.push({
                    name: 'imagetext.details',
                    query: {
                        id: this.id
                    }
                })
            },
            add () {
                this.addCarShop ++;
            },
            subtract () {
                if(this.addCarShop <= 1){
                    return false;
                }
                this.addCarShop --;
            },

            getGoodsImgDetails () {
                this.$axios.get(`${process.env.API_HOST}/getthumimages/${this.id}`)
                .then(res => {
                    this.imgs = res.data.message;
                    this.imgs.forEach(function(val){
                        val.img = val.src
                    })
                    console.log(res.data.message);
                })
                .catch(err => console.log(err))
            },
            getGoodsDetails () {
                this.$axios.get(`${process.env.API_HOST}/goods/getinfo/${this.id}`)
                .then(res => {
                    console.log(res);
                })
                .catch(err => console.log(err))
            },
            addCar () {
                this.ball = true;

                // this.eventNum();
            },
            afterEnter () {
                this.ball = false;
                Bus.$emit('addCarShopFn',this.addCarShop);
            }
        }
    }
</script>
<style scoped="">
    .tmpl{
        padding-bottom: 55px;
    }
    .goods-title{
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        font-size: 18px;
        border-bottom: 1px solid #ccc;
    }
    .goods-box{
        width: 100%;
        padding: 10px;
        display: flex;
    }
    .goods-box p{
        padding-right: 10px;
        font-size: 14px;
        color: #ccc;
    }
    .goods-box p span{
        font-size: 14px;
        color: #ccc;
        text-decoration: line-through;
        padding-left: 10px;
    }
    .goods-box p i{
        font-style: normal;
        font-size: 25px;
        color: red;
        padding-left: 10px;
    }
    .num {
        display: flex;
        padding: 5px 0;
    }
    .num p{
        text-align: center;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        margin: 0 5px;
        border-radius: 4px;
    }
    .goods-button{
        width: 100%;
        padding: 0 10px;
        position: relative;
    }
    .goods-button p{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #000;
        position: absolute;
        top: 0;
        left: 110px;
    }
    .ball-enter-active, .ball-leave-active{
        animation: ball 1s;
        animation-fill-mode: forwards;
    }
    .ball-enter, .ball-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
    @keyframes ball{
        0% {
            transform: translate3d(0, 0, 0);
        }
        50% {
            transform: translate3d(140px, -50px, 0);
        }
        75% {

            transform: translate3d(160px, 0, 0);
        }
        100% {

            transform: translate3d(140px, 200px, 0);
        }
    }
    .goods-say{
        padding: 0 10px;
    }
    .goods-say >>> button{
        width: 100%;
        margin-top: 10px;
    }
</style>